<template>
<div class='list' ref='wrapper'>
   <div class='list-content'>
       <div class='area'>
           <div class='title border-topbottom'>当前城市</div>
           <div class='area-content button-wrap'>
               <span class='button'>{{this.currentCity}}</span>
           </div>
       </div>
       <div class='area'>
           <div class='title border-topbottom'>热门城市</div>
           <div class='area-content'>
               <span 
                class='button' 
                v-for="item in hot" 
                :key="item.id"
                @click="handleCityClick(item.name)"
               >
               {{item.name}}
               </span>
           </div>
       </div>
       <div 
           class='area' 
           v-for="(item,key) of cities" 
           :key="key"
           :ref="key"
       >
           <div class='title border-topbottom'>{{key}}</div>
           <ul class='item-list'>
               <li 
                class='item border-bottom' 
                v-for="innerItem in item" 
                :key="innerItem.id"
                @click="handleCityClick(innerItem.name)"
               >
                   {{innerItem.name}}
               </li>
           </ul>
       </div>
   </div>
</div>
</template>
<script>
import {mapState,mapMutations} from "vuex" ;
import BScroll from "better-scroll";
export default {
    name:"CityList",
    props:{
      cities:Object,
      hot:Array,
      letter:String
    },
    computed:{
       ...mapState({
           currentCity:"city"
       })
    },
    watch:{
      letter (){
          if(this.letter){
            const el=this.$refs[this.letter.trim()][0]
            this.scroll.scrollToElement(el)
          }
      }
    },
    methods:{
        handleCityClick (city) {
            this.changeCity(city)
            this.$router.push("/")
        },
        ...mapMutations(['changeCity'])
    },
    mounted (){
       const wrapper=this.$refs.wrapper;
       this.scroll=new BScroll(wrapper,{mouseWheel:true,click:true,tap:true});
    }
}
</script>
<style lang='scss' scoped>
@import "~styles/_parameters.scss";
.list{
    position:absolute;
    top:1.72rem;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}
    .area{
       .title{
           padding:.2rem;
           background-color:$bgNormal;
       }
    }
    .area-content{
        padding:.1rem .4rem .1rem .1rem;
        overflow:hidden;
        .button{
            display:block;
            float:left;
            width:calc(33.33% - .2rem);
            border:1px solid #eee;
            text-align:center;
            padding:.1rem;
            border-radius:.1rem;
            margin:.1rem;
        }
    }
    .item-list{
        .item{
            padding:.2rem;
            padding-right:.4rem;
        }
    }
</style>